<template>
  <Header />
  <Three ref="modelRef"></Three>
  <Footer />
  <PathDialog ref="pathDialogRef" />
  <WeatherDialog ref="weatherDialogRef" />
  <!-- <DeviceDialog ref="deviceDialogRef" /> -->
  <HistoryDialog ref="historyDialogRef" />
  <SceneryDialog ref="sceneryDialogRef" />
  <VideoDialog ref="videoDialogRef" />
  <!-- <HomeDialog ref="homeDialogRef" /> -->
</template>
<script setup>
import Header from './common/header/index.vue'
import Footer from './common/footer/index.vue'
import PathDialog from './common/pathDialog/index.vue'
import WeatherDialog from './common/weatherDialog/index.vue'
import DeviceDialog from './common/deviceDialog/index.vue'
import HistoryDialog from './common/historyDialog/index.vue'
import SceneryDialog from './common/sceneryDialog/index.vue'
import VideoDialog from './common/videoDialog/index.vue'
import HomeDialog from './common/homeDialog/index.vue'

import Three from './three.vue'
import { useRoute } from 'vue-router'

const modelRef = useTemplateRef('modelRef')
const pathDialogRef = useTemplateRef('pathDialogRef')
const weatherDialogRef = useTemplateRef('weatherDialogRef')
const deviceDialogRef = useTemplateRef('deviceDialogRef')
const historyDialogRef = useTemplateRef('historyDialogRef')
const sceneryDialogRef = useTemplateRef('sceneryDialogRef')
const videoDialogRef = useTemplateRef('videoDialogRef')
const homeDialogRef = useTemplateRef('homeDialogRef')

const watchCustomEvent = () => {
  window.addEventListener('footerClick', (e) => {
    switch (e.detail.type) {
      case 'home':
        modelRef.value && modelRef.value.move()
        break
      case 'path':
        pathDialogRef.value?.open()
        break
      case 'weather':
        weatherDialogRef.value?.open()
        break
      case 'scenery':
        sceneryDialogRef.value?.open()
        break
      case 'video':
        videoDialogRef.value?.open()
        break
      // case 'history':
      //     type.value = 'history'
      //     historyDialogRef.value.open()
      //     break;
      // case 'device':
      //   type.value = 'device'
      //   deviceDialogRef.value.open()
      //   break
      default:
        break
    }
  })
}
watchCustomEvent()
</script>
<style lang="scss">
.el-dialog {
  // --el-bg-color: #14141454;;
}

.el-dialog__header {
  padding-bottom: 5px;
}
</style>
